<template>
  <div>
    <el-input v-model="selectedIcon" disabled :placeholder="placeholder">
      <template slot="append">
        <el-button @click="showSelectIcon"><i class="el-icon-s-promotion" /></el-button>
      </template>
    </el-input>
    <model-dialog title="图标选择器" :visible.sync="dialogVisible" width="800px" @close="dialogVisible=!dialogVisible">
      <el-tabs v-model="activeName" class="icon-tabs">
        <el-tab-pane v-for="item in iconLists" :key="item.label" :label="item.label" :name="item.label">
          <div class="icon-list-container">
            <div v-for="icon in item.list" :key="icon.value" class="icon-item" @click="handleConfirm(icon.value)">
              <template v-if="item.type==='svg'">
                <svg-icon :icon-class="icon.value" style="font-size:36px" class="icon" />
              </template>
              <template v-if="item.type==='iconfont'">
                <span class="icon iconfont" :class="icon.value" />
              </template>
              <div class="name"> {{ icon.label }}</div>
              <div class="code-name">.{{ icon.value }} </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </model-dialog>
  </div>
</template>
<script>

export default {
  props: {
    value: {
      type: String,
      default() {
        return ''
      }
    },
    placeholder: {
      type: String,
      default() {
        return '请选择图标'
      }
    }
  },
  data() {
    return {
      keyword: '',
      dialogVisible: false,
      activeName: '',
      iconLists: this.iconList,
      selectedIcon: ''
    }
  },
  watch: {
    value: function(val) {
      this.selectedIcon = val
    }

  },
  created() {
    if (this.iconLists.length > 0) {
      this.activeName = this.iconLists[0].label
    }
  },
  mounted() {
  },
  destroyed() {},
  methods: {
    showSelectIcon() {
      this.dialogVisible = true
    },

    handleConfirm(val) {
      this.dialogVisible = false
      this.selectedIcon = val
      this.$emit('input', this.selectedIcon)
    }

  }
}
</script>
<style rel="stylesheet/scss" lang="scss">
.icon-tabs{
  .el-tabs__content{
    height: 530px !important;
    overflow: auto  !important ;
  }
}

 .icon-list-container{
    display: flex;
    flex-wrap: wrap;
    .icon-item{
        text-align: center;
        width: 100px;
        padding: 15px 20px 0;
        -webkit-transition: all .2s;
        transition: all .2s;
        cursor: pointer;
    }
    .icon{
        font-size: 24px;
    }
    .name,.code-name{
        color: #666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
    }
}
</style>

